<template>
    <div class="xhs-content-wrap" v-show="show">
        <div class="input" ref="el" :style="{ fontSize: fontSize + 'px', top: topGap + 'px' }" contenteditable="true"></div>
        <div class="bg-people" :class="peopleStyle"></div>
        <div class="tag"></div>
    </div>

    <div class="config-list" v-show="show">
        <div class="list-item">
            <label>高亮文字：</label>
            <input placeholder="在此输入加粗文字" v-model.trim="strongText"></input>
        </div>
        <div class="list-item">
            <label>字体大小：</label>
            <input type="number" v-model.trim="fontSize"/>
        </div>
        <div class="list-item">
            <label>顶部距离：</label>
            <input type="number" v-model.trim="topGap"/>
        </div>
        <div class="list-item">
            <label>人物样式：</label>
            <div>
                <input type="radio" id="p1" value="p1" v-model="peopleStyle"><label for="p1">图1</label>
                <input type="radio" id="p2" value="p2" v-model="peopleStyle"><label for="p2">图2</label>
                <!-- <input type="radio" id="p3" value="p3" v-model="peopleStyle"><label for="p3">图3</label> -->
            </div>
        </div>
    </div>
</template>

<script>
import { ref, watch, onMounted } from 'vue'
export default {
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    setup () {
        const strongText = ref('')
        const fontSize = ref('80')
        const topGap = ref('30')
        const peopleStyle = ref('p1')
        const el = ref(null)

        watch(strongText, (newVal) => {
            if (newVal) {
                const str = el.value.innerText
                const txtArr = newVal.split('-')
                let itemArr = null
                txtArr.forEach((item, index) => {
                    itemArr = item.split('').map(c => '<span>' + c +'</span>')
                    if (index == 0) {
                        el.value.innerHTML = str.replace(item, '<em>' + itemArr.join('') + '</em>')
                    } else {
                        el.value.innerHTML = el.value.innerHTML.replace(item, '<em>' + itemArr.join('') + '</em>')
                    }
                })
            } else {
                el.value.innerHTML = el.value.innerText
            }
        })

        onMounted(() => {
            el.value.addEventListener('paste', (e) => {
                e.preventDefault()
                const text = e.clipboardData.getData('text/plain')
                el.value.innerHTML = text
            })
        })
        return {
            el,
            strongText,
            fontSize,
            topGap,
            peopleStyle
        }
    }
}
</script>
